<template>
    <div class="login_page">
        <div class="common-layout">
            <el-container style="height: 300px">
                <el-aside width="240px">
                    <div class="img">
                        <img src="../assets/bg.jpg" alt="">
                    </div>
                    <p class="text">后台管理系统</p>
                </el-aside>
                <el-main>
                    <h2>欢迎登录</h2>
                    <el-form
                    ref="formRef"
                    :model="numberValidateForm"
                    label-width="0px"
                    class="demo-ruleForm">
                    <el-form-item
                    prop="username"
                    :rules="[
                        { required: true, message: '用户名必填' },
                    ]"
                    >
                        <el-input
                            v-model="numberValidateForm.username"
                            type="text"
                            autocomplete="off"
                            :prefix-icon="User"
                            placeholder="请输入用户名"
                        />
                    </el-form-item>
                    <el-form-item
                    prop="password"
                    :rules="[
                        { required: true, message: '密码必填' },
                    ]"
                    >
                        <el-input
                            v-model="numberValidateForm.password"
                            type="password"
                            autocomplete="off"
                            show-password
                            :prefix-icon="Lock"
                            placeholder="请输入密码"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(formRef)">登录</el-button>
                        <el-button @click="resetForm(formRef)">重置</el-button>
                    </el-form-item>
                </el-form>
                    
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script setup>
import { User,Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
import { reactive, ref } from 'vue'

const router=useRouter()
const formRef = ref()
const numberValidateForm = reactive({
  password: '',
  username:''
})
const submitForm = async(formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
  console.log(numberValidateForm.username,numberValidateForm.password);
//   const res=await axios.post('login',{
//     username:numberValidateForm.username,
//     password:numberValidateForm.password
//   })
//   console.log(res,res.data.data.token);
let res={
    code:'20000',
    data:{
        token:'jndkfjivo45wovjbdfgb6tyj'
    }
}
  if(res.code=='20000'){
    ElMessage({
        message:'登录成功!',
        type:'success'
    })
    localStorage.setItem('token',res.data.token)
    setTimeout(()=>{
        router.push('/home')
    localStorage.setItem("flag",true)
        // router.go(0)
    },1000)
    // setTimeout(()=>{
    //     router.go(0)
    // },1010)
    
  }else{
    ElMessage.error('用户名或密码错误')
    return
  }

}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="scss" scoped>
.login_page{
     background-image: url('@/assets/bg1.jpg');
     background-size: 100% 100%;
    //background:rgb(100, 170, 249);
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.common-layout{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // position: absolute;
    // margin-left: 50%;
    // margin-top: 50%;
    // transform: translate(-50%,-50%);
    :deep(.el-container){
        flex:none;
    }
}
.img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;
    }
}
.text{
    font-size: 15px;
    margin-top: 8px;
}
h2{
    text-align: center;
    font-size: 22px;
    margin-bottom: 15px;
}
</style>

<style scoped>
.el-container{
    height: 100%;
    box-shadow: 0 0 4px rgb(92, 91, 91);
}
aside.el-aside{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* background: white; */
    background: url('@/assets/bg.jpg');
    background-size: 100% 100%;
    border-right:1px solid beige;
    border-radius: 5px 0 0 5px;
}
.el-main{
    /* background:white; */
    background-color: rgba(255,255,255,0.8);
    border-radius: 0 5px 5px 0;
}
form.el-form.el-form--default.el-form--label-right.demo-ruleForm{
    margin-top: 8px;
    margin-right: 10px;
}
button.el-button.el-button--primary,button.el-button{
    width: 100%;
    border-radius: 10px;
}
.el-button+.el-button{
    margin-left: 0;
    margin-top: 12px;
}
</style>
